<template>
	<el-card class="box-card table">
		<template #header>
			<div class="card-header">
				<span>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/product/list' }">商品管理</el-breadcrumb-item>
						<el-breadcrumb-item>商品分类</el-breadcrumb-item>
					</el-breadcrumb>
				</span>
				<router-link :to="{ path: '/product/category/add' }">
					<el-button class="button" type="success" icon="el-icon-circle-plus" size="small">新增分类</el-button>
				</router-link>
			</div>
		</template>
		<div class="table">
			<el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
				element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
				style="width: 100%">
				<el-table-column label="分类名称" width="180">
					<template #default="scope">
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="240">
					<template #default="scope">
						<span style="margin-left: 10px">{{ scope.row.created_at }}</span>
					</template>
				</el-table-column>
				<el-table-column label="更新时间" width="240">
					<template #default="scope">
						<span style="margin-left: 10px">{{ scope.row.updated_at }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="280">
					<template #default="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<div class="fenye" v-if="total">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="sizes" :page-size="params.size"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<!-- 分页结束 -->
	</el-card>
</template>

<script>
	import {
		getProductCategoryList,
		productCategoryDel
	} from "@/api/index.js";
	export default {
		name: "ProductCategoryList",
		data() {
			return {
				tableData: [],
				total: null,
				currentPage: 1,
				sizes: [10, 20, 30, 40],
				params: {
					page: 1,
					size: 10,
				},
				loading: true,
			};
		},
		created() {
			this.getLists();
		},
		methods: {
			getLists() {
				var that = this;
				getProductCategoryList(this.params)
					.then((res) => {
						that.tableData = res.data.data;
						that.total = res.data.total;
						that.loading = false;
						// console.log(res.data);
					})
					.catch((error) => {});
			},
			handleSizeChange(val) {
				this.params.size = val;
				this.getLists();
			},
			handleCurrentChange(val) {
				this.params.page = val;
				this.currentPage = val;
				this.getLists();
			},
			// 编辑方法
			handleEdit(index,row) {
				// 方式一：跳转到编辑页面，传递分类ID
				this.$router.push({
					path: '/product/category/edit',
					query: {
						id: row.id
					}
				});
			},
			async del(id) {
				var that = this;
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(function() {
						productCategoryDel({
								id: id
							})
							.then((res) => {
								if (res.code == 1) {
									that.$message({
										type: "success",
										message: "删除成功!",
									});
									that.getLists();
								}
							})
							.catch((error) => {});
					})
					.catch(function() {
						that.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			}
		},
	};
</script>


<style scoped>
	.fenye {
		margin-top: 30px;
	}
</style>